<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>班次管理</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="attendance-classes">
      <div class="attendance-classes-handle">
        <el-button size="medium" type="primary" @click="addClasses">新增班次</el-button>
      </div>
      <div class="attendance-classes-table-div">
        <el-table fit stripe border :data="classesList" style="width: 100%" height="parent">
          <el-table-column label="班次名称" prop="className" min-width="130px" align="center"></el-table-column>
          <el-table-column label="考勤时间" prop="attendanceTime" min-width="200px" header-align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="130px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateClasses(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="deleteClasses(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="formType==='add'?'新增班次':'修改班次'" :visible.sync="openDialog" width="600px" top="calc(50vh - 235px)" @closed="dialogClosed">
      <div style="height: 410px;overflow: auto">
        <class-form v-if="openDialog" :type="formType" :classes="selectClasses" @close="openDialog=false" @save-success="saveSuccess"></class-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="./myJs/importFile.js"></script>
<script>
  importFile([
    "./attendanceMgr/attendanceClasses/css/classForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>
<script src="./attendanceMgr/attendanceClasses/models/classFormModel.js"></script>
<script src="./attendanceMgr/attendanceClasses/classForm.js"></script>

<script>
  var ClassesModel = function (obj) {
    var date = moment().format('YYYY-MM-DD');
    BaseModel.call(this);
    var self = this;

    var fn = {
      initData: function (obj) {
        var fields = ['id', 'className', 'isNeedRest', 'restOne', 'restTwo'];
        self.setDataFromObj(obj, fields);

        var attendanceTime = obj.attendanceTime;
        var timeList = attendanceTime.split(' ');
        timeList = _.map(timeList, function (time) {
          var arr = time.split('-');
          var startTime = moment(`${date} ${arr[0]}`).valueOf();
          var endTime = moment(`${date} ${arr[1]}`).valueOf();
          return {
            startTime: new Date(startTime),
            endTime: new Date(endTime)
          };
        });
        self.timeList = timeList;
        self.attendanceTime = attendanceTime;
      }
    };

    fn.initData(obj);
  };

  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin(15)
    ],
    data: function () {
      return {
        loading: false,
        classesList: [],
        openDialog: false,
        formType: '',
        selectClasses: null
      };
    },

    created: function () {
      this.setClassesList();
    },

    methods: {
      setClassesList: function () {
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        var self = this;
        this.loading = true;
        ajaxRequest('dingTalk/queryClass', {
          start: start,
          length: pageSize
        }, false).then(function (res) {
          var classesList = res.returnData;
          if (classesList.length === 0 && pagination.currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setClassesList();
            });
            return;
          }
          classesList = _.map(classesList, function (classes) {
            classes = new ClassesModel(classes);
            return classes;
          });

          self.classesList = classesList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      pageChange: function () {
        this.setClassesList();
      },

      addClasses: function () {
        this.formType = 'add';
        this.openDialog = true;
      },

      updateClasses: function (selectClasses) {
        this.formType = 'update';
        this.selectClasses = selectClasses;
        this.openDialog = true;
      },

      saveSuccess: function () {
        this.openDialog = false;
        this.setClassesList();
      },

      dialogClosed: function () {
        this.formType = '';
        this.selectClasses = null;
      },

      deleteClasses: function (classes) {
        var self = this;
        this.$confirm('是否确定删除该条班次数据', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toDeleteClasses(classes.id);
        }).catch(function () {});
      },

      toDeleteClasses: function (id) {
        this.loading = true;
        var self = this;
        ajaxRequest('dingTalk/deleteClass', {
          id: id
        }).then(function () {
          self.$alert('该条班次数据成功删除', '信息', {
            callback: function () {
              self.setClassesList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      ClassForm: ClassForm
    }
  });

</script>

<style>
  .attendance-classes {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .attendance-classes .attendance-classes-handle {
    margin-bottom: 10px;
  }

  .attendance-classes .attendance-classes-table-div {
    flex: 1;
    overflow: auto;
  }

  .attendance-classes .attendance-classes-table-div .el-button+.el-button {
    margin-left: 0;
  }

</style>

</html>
